import Vue from "vue";
/*
    =====使用方法=====
   1、定义公共js里，在入口文件main.js中import；
   2、给elementUI的dialog上加上 v-fullScreen 指令就可以实现弹窗的全屏和拉伸了。
    结合css使用
    <el-dialog
      v-fullScreen
    >
      <span
        slot="footer"
        class="dialog-footer"
      ></span>
      <div class="el-dialog-div"></div>
    </el-dialog>
    <style>
      .el-dialog-div {
        height: 50vh;
        overflow: auto;
      }
    </style>
 */
Vue.directive("fullScreen", {
    bind: function (el, binding, vnode) {
        let isFullScreen = false;
        const dialog = el.querySelector(".el-dialog");
        const header = el.querySelector(".el-dialog__header");
        if (!header || !dialog || !vnode) return;
        //给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
        dialog.style.overflow = "auto";
        header.style.paddingRight = "43px";
        //边框阴影
        header.style.boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
        //清除选择头部文字效果
        header.onselectstart = new Function("return false");
        //头部加上可拖动cursor
        header.style.cursor = "move";
        const {width, top} = vnode.componentInstance;
        const fullScreenBtn = document.createElement("button");
        fullScreenBtn.type = "button";
        fullScreenBtn.style = "float:right;padding:0;background: 0 0;border:0;outline:0;cursor:pointer;font-size:16px;";
        const fullScreenIcon = document.createElement("i");
        fullScreenIcon.className = "el-icon el-icon-full-screen";
        fullScreenIcon.style.color = 'red';
        fullScreenBtn.append(fullScreenIcon);
        /*  拖拽方法  */
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dialog.currentStyle || window.getComputedStyle(dialog, null);
        let moveDown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - header.offsetLeft;
            const disY = e.clientY - header.offsetTop;
            // 获取到的值带px 正则匹配替换
            let styL, styT;
            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
            if (sty.left.includes("%")) {
                styL =
                    +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
                styT =
                    +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
            } else {
                styL = +sty.left.replace(/\px/g, "");
                styT = +sty.top.replace(/\px/g, "");
            }
            document.onmousemove = function (e) {
                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX;
                const t = e.clientY - disY;
                // 移动当前元素
                dialog.style.left = `${l + styL}px`;
                dialog.style.top = `${t + styT}px`;
            };

            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };

        fullScreenBtn.addEventListener("click", () => {
            isFullScreen = !isFullScreen;
            handleFullScreen(el, dialog, isFullScreen, top, width, header, moveDown);
            return false;
        });

        header.append(fullScreenBtn);

        header.addEventListener("dblclick", () => {
            isFullScreen = !isFullScreen;
            handleFullScreen(el, dialog, isFullScreen, top, width, header, moveDown);
            return false;
        });

        header.onmousedown = moveDown;
    },
});

/**
 * 全屏方法
 */
function handleFullScreen(
    el,
    dialog,
    isFullScreen,
    marginTop,
    width,
    header,
    moveDown
) {
    if (!dialog) return false;
    const elDialogHeader = el.querySelector(".el-dialog__header");
    const elDialogFooter = el.querySelector(".el-dialog__footer");
    const elDialogBody = el.querySelector(".el-dialog__body");
    //el-dialog下只有一个div
    const elDialogDiv = el.querySelector(".el-dialog-div");
    if (isFullScreen) {
        dialog.style.margin = "0";
        dialog.style.position = "absolute";
        dialog.style.top = "0px";
        dialog.style.left = "0px";
        dialog.style.right = "0px";
        dialog.style.bottom = "0px";
        dialog.style.width = "100%";
        dialog.style.height = "100vh";
        //设置计算方式 border-box（推荐）宽高 = width/height（已包含 padding 和 border）
        dialog.style.boxSizing="border-box";
        elDialogHeader.style.boxSizing = "border-box";
        elDialogBody.style.boxSizing = "border-box";

        elDialogHeader.style.height = "10%"; //设置头的高度
        if (elDialogFooter && elDialogFooter != null) {
            elDialogFooter.style.boxSizing = "border-box";
            elDialogBody.style.height = "85%";
            elDialogFooter.style.height = "5%";
            elDialogFooter.style.padding = "0 20px";
        } else {
            elDialogBody.style.height = "90%";
        }
        if (elDialogDiv && elDialogDiv != null) {
            elDialogDiv.style.height = "100%";
        }
    } else {
        dialog.style.marginTop = marginTop;
        dialog.style.width = width;
        dialog.style.height = "auto";
        dialog.style.position = "relative";
        header.onmousedown = moveDown;
        if (elDialogFooter && elDialogFooter != null) {
            elDialogFooter.style.height = "";
            elDialogFooter.style.padding = "";
        }
        elDialogBody.style.height = "";
        if (elDialogDiv && elDialogDiv != null) {
            elDialogDiv.style.height = "";
        }
    }
}
